<template>
  <div class="course_system">
    <h5>{{name}}</h5>
    <el-row class="course_system_div">
    <transition-group
      name="flip-list"
      v-on:before-enter="beforeIconEnter"
      v-on:enter="iconEnter"
    >
      <el-col :span="10" :offset="2" class="div" :style="'background: linear-gradient(to right, '+item.color+' 0%,#ffffff 100%);'" v-for="item in data" v-if="iconShow" :key="item">
        <el-col :span="10" :class="'ms-icon '+item.icon_list+' ms-icon-course'"></el-col>
        <el-col :span="12" >
          <h4 class="title">{{item.title}}</h4>
          <span class="content" v-html="item.content"></span>
        </el-col>
      </el-col>

      </transition-group>
    </el-row>
  </div>
</template>
<script>
  export default {
      data(){
        return {
            iconShow : false
        }
      },
      props : ['name' ,'data'],
    methods : {
      beforeIconEnter (el) {
        Velocity(el, { opacity: 0 , translateX : '500px'}, { duration: 0 })
      },
      iconEnter(el , done){
        Velocity(el, { opacity: 0.2 , translateX : '0px'}, { duration: 1000 })
        Velocity(el, { opacity: 1 , translateX : '0px'}, { duration: 1000  , complete: done})
      },
      windowScrolls () {
        if (this.$el.offsetTop < window.scrollY + 600 ) {
          this.iconShow = true;
        }
      }
    },
    mounted(){
      window.addEventListener('scroll', this.windowScrolls)
      if (this.$el.offsetTop < window.scrollY + 600 ) {
        this.iconShow = true;
      }
    }
  }
</script>
<style>
  .course_system_div {
    min-height: 400px;
  }
  .div{
    border-radius: 10px;
    margin-bottom : 30px;
    margin-top: 30px;
    height: 230px;
  }
  .ms-icon-course {
    color :white;
    height: 230px;
    line-height: 230px;
    text-align: center;
    font-size: 10em;
  }
  .title {
    text-align: left;
    margin-top: 3em;
    margin-bottom: 2em;
  }
  .content {
    text-align: left;
    display:block;
    width: 98%;
    font-size: 13px;
  }
</style>
